<template>
  <scroll-view scroll-y="ture" style="height: 100vh" class="giftcard_content">
    <view
      class="top_image"
      :style="{
        backgroundImage: `url(${keyVision || oss2('funCard/index_top.png')})`,
      }"
    >
    </view>
    <view class="body_content">
      <view class="order_view" @click.stop="toOrder">
        <image class="order_icon" :src="oss2('funCard/index_order.png')" />
        我的订单
        <image
          class="order_right"
          :src="oss2('funCard/index_order_icon.png')"
        />
      </view>

      <view class="theme_content">
        <image class="theme_back" :src="oss2('funCard/index_oreo.png')"></image>
        <view class="card_title">
          <image class="title_left" :src="oss2('funCard/index_left.png')" />
          这份甜蜜，和TA分享
          <image class="title_right" :src="oss2('funCard/index_right.png')" />
        </view>
        <view class="theme_card">
          <view
            class="theme_item"
            v-if="displayList.length === 1"
            @click="showWait"
          >
            <image :src="oss2('funCard/comingsoon.jpg')" />
            <p>敬请期待</p>
          </view>
          <view
            class="theme_item"
            v-for="item in displayList"
            :key="item.id"
            @click.stop="toChoose(item.id)"
          >
            <image :src="item.icon" />
            <p>{{ item.name }}</p>
          </view>
          <view
            class="theme_item"
            v-if="displayList.length < 3"
            @click="showWait"
          >
            <image :src="oss2('funCard/comingsoon.jpg')" />
            <p>敬请期待</p>
          </view>
        </view>
      </view>

      <view class="card_content">
        <image class="theme_back" :src="oss2('funCard/index_oreo.png')" />
        <view class="card_title">
          <image class="title_left" :src="oss2('funCard/index_left.png')" />
          挑个礼物和TA玩在一起
          <image class="title_right" :src="oss2('funCard/index_right.png')" />
        </view>

        <view class="list_grid">
          <view
            class="card_item"
            v-for="item in themeList"
            :key="item.id"
            @click.stop="toChoose(item.id)"
          >
            <image :src="item.imageUrl" />
            <view class="card_btn">
              选卡面<image :src="oss2('funCard/index_choose.png')" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Header back -->
    <view class="header-back" :style="{ height: `${headHeight * 2}rpx` }">
      <view
        class="btn_back"
        :style="{
          width: `${backWidth * 2}rpx`,
          height: `${backHeight * 2}rpx`,
          top: `${backPostion * 2}rpx`,
        }"
      >
        <view class="left_btn" @click.stop="backPersonal()">
          <image :src="oss2('funCard/icon_back.png')" />
        </view>
        <view class="right_btn" @click.stop="backHome()">
          <image :src="oss2('funCard/icon_home.png')" />
        </view>
      </view>
    </view>
  </scroll-view>


</template>

<script setup>
import {
  onLoad,
  onShow,
  onHide,
  onUnload,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import { ref } from "vue";
import { oss2, message } from "@/utils/utils";
import { GetFunCard, GetThemeList } from "@/services/giftcard.js";
import privacyPopup from "@/components/privacy-popup";

let enterTime = "";
let outTime = "";
let stayTime = "";

const headHeight = ref(0);
const backWidth = ref(0);
const backHeight = ref(0);
const backPostion = ref(0);

onLoad((option) => {
  wx.showShareMenu({
    withShareTicket: true,
    menus: ["shareAppMessage"],
  });
});
onShow(() => {
  // 用户进入时间
  enterTime = new Date();

  getFunCard();
  getThemeList();

  // 获取状态栏高度
  const { statusBarHeight } = uni.getSystemInfoSync();
  // 获取胶囊位置尺寸
  const menuButtonObject = uni.getMenuButtonBoundingClientRect();
  backWidth.value = menuButtonObject.width;
  backHeight.value = menuButtonObject.height;
  const { top, height } = menuButtonObject;
  // 获取导航栏的高度
  const navBarHeight = height + (top - statusBarHeight) * 2;
  // 计算状态栏与导航栏的总高度
  const statusNavBarHeight = statusBarHeight + navBarHeight;
  headHeight.value = statusNavBarHeight;
  backPostion.value = menuButtonObject.top;
  getApp().accessLogAdd();
});
onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "fun_card_homepage",
    "view",
    "fc_firstpage",
    stayTime
  );
});
onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "fun_card_homepage",
    "view",
    "fc_firstpage",
    stayTime
  );
});

const keyVision = ref("");
const displayList = ref([]);
const themeList = ref([]);

const getFunCard = async () => {
  const { data } = await GetFunCard();
  keyVision.value = data.keyVision;
  displayList.value = data.displayThemes;
};
const getThemeList = async () => {
  const { data } = await GetThemeList();
  themeList.value = data.list;
};
const showWait = () => {
  message("敬请期待");
};
onShareAppMessage((e) => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1].route;
  const pageUrl = currentPage;

  const shareObj = {
    title: "快来定制你的奥利奥玩心FUN享卡！", // 默认是小程序的名称(可以写slogan等)
    path: pageUrl, // 默认是当前页面，必须是以‘/’开头的完整路径
    imageUrl: oss2("funCard/card_wx.png"), //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
    success: (res) => {
      // 转发成功之后的回调
      if (res.errMsg == "shareAppMessage:ok") {
      }
    },
    fail: (err) => {
      // 转发失败之后的回调
      console.log("转发失败之后的回调", err);
      if (res.errMsg == "shareAppMessage:fail cancel") {
        // 用户取消转发
        console.log("用户取消转发");
      } else if (res.errMsg == "shareAppMessage:fail") {
        // 转发失败，其中 detail message 为详细失败信息
        console.log("转发失败，其中detail message 为详细失败信息");
      }
    },
    complete: () => {
      // 转发结束之后的回调（转发成不成功都会执行）
      console.log("转发结束之后的回调（转发成不成功都会执行）");
    },
  };
  console.log(shareObj);
  return shareObj;
});

const backPersonal = () => {
  uni.switchTab({
    url: "/pages/personal/personal",
  });
};
const backHome = () => {
  getApp().emdlz2(
    "track",
    "event",
    "fun_card_homepage",
    "click",
    "back_homepage",
    ""
  );
  uni.switchTab({
    url: "/pages/home/home",
  });
};
const toOrder = () => {
  getApp().emdlz2(
    "track",
    "event",
    "fun_card_homepage",
    "click",
    "fc_orders",
    ""
  );
  uni.navigateTo({
    url: "/personalPages/order/index?type=1",
  });

  // uni.redirectTo({
  //   url: "/funCard/share?orderId=63568f2161da45a6be48570418bf8deb",
  // });
};
const toChoose = (id) => {
  getApp().emdlz2(
    "track",
    "event",
    "fun_card_homepage",
    "click",
    "fc_topic_" + id,
    ""
  );
  uni.navigateTo({
    url: "/funCard/choose?themeId=" + id,
  });
};
</script>

<style lang="less" scoped>
.giftcard_content {
  position: relative;
  background-color: #f7f5f6;
  .top_image {
    width: 375px;
    height: 543px;
    background-color: #1757c1;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 100%;
  }
  .body_content {
    width: 100%;
    height: 707px;
    box-sizing: border-box;
    padding: 16px 16px 0;
    .order_view {
      position: relative;
      width: 345px;
      height: 31px;
      line-height: 31px;
      background: #1757c1;
      border-radius: 8px;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      text-align: right;
      box-sizing: border-box;
      padding-right: 30px;
      margin-bottom: 15px;
      .order_icon {
        width: 12px;
        height: 12px;
        position: absolute;
        left: 11px;
        top: 10px;
      }
      .order_right {
        width: 7px;
        height: 7px;
        position: absolute;
        right: 21px;
        top: 12px;
      }
    }
    .theme_content {
      position: relative;
      width: 345px;
      height: 188px;
      background-color: #fff;
      box-shadow: 0px 4px 9px 0px rgba(198, 198, 198, 0.4);
      border-radius: 10px;
      box-sizing: border-box;
      padding-top: 40px;
      margin-bottom: 11px;

      .theme_card {
        display: flex;
        justify-content: space-between;
        width: 293px;
        height: 115px;
        box-sizing: border-box;
        margin: 0 auto;
        .theme_item {
          width: 80px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #6a6a6a;
          text-align: center;
          image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 4px;
          }
        }
      }
    }
    .theme_back {
      position: absolute;
      width: 114px;
      height: 30px;
      top: 14px;
      left: 114px;
    }
    .card_title {
      position: relative;
      width: 100%;
      height: 17px;
      line-height: 18px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #000000;
      text-align: center;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      .title_left {
        width: 6px;
        height: 10px;
        margin-right: 15px;
      }
      .title_right {
        width: 6px;
        height: 10px;
        margin-left: 15px;
      }
    }
    .card_content {
      position: relative;
      width: 100%;
      height: 403px;
      .card_title {
        padding-top: 40px;
        margin-bottom: 21px;
      }
      .list_grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .card_item {
        position: relative;
        width: 165px;
        height: 101px;
        margin-bottom: 15px;
        image {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
        .card_btn {
          position: absolute;
          width: 76px;
          height: 23px;
          line-height: 23px;
          right: 10px;
          bottom: 8px;
          box-sizing: border-box;
          padding-left: 15px;
          background: #ffffff;
          opacity: 0.5;
          border-radius: 12px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #000000;
          image {
            width: 10px;
            height: 10px;
            position: absolute;
            top: 7px;
            right: 10px;
          }
        }
      }
    }
  }

  .header-back {
    position: fixed;
    top: 0;
    width: 100%;
    .btn_back {
      box-sizing: border-box;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 6px 5px;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 18px;
      position: absolute;
      left: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .left_btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        height: 100%;
        image {
          width: 6px;
          height: 11px;
        }
      }
      .right_btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 20px;
          height: 16px;
        }
      }
    }
  }
}
</style>
